<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>个人中心</title>

<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- layui CSS -->
<link rel="stylesheet" href="./css/x-admin.css" media="all">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/css/bootstrap.min.css">

<!-- FontAwesome CSS -->
<link rel="stylesheet" href="css/css/font-awesome.min.css">

<!-- ElegantFonts CSS -->
<link rel="stylesheet" href="css/css/elegant-fonts.css">

<!-- themify-icons CSS -->
<link rel="stylesheet" href="css/css/themify-icons.css">

<!-- Swiper CSS -->
<link rel="stylesheet" href="css/css/swiper.min.css">

<!-- Styles -->
<link rel="stylesheet" href="style.css">


<style type="text/css">
.dropdown {
	display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
	background: transparent;
	min-width: 150px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

.dropdown-content a:hover {
	color: #19c880;
}

.dropdown:hover .dropdown-content {
	display: block;
}

.contact-form input[type='text'] {
	width: 70%;
	margin-left: 20px;
}

.contact-form input[type="password"] {
	width: 100%;
	padding: 12px 20px;
	margin-top: 18px;
	border: 1px solid #ebebeb;
	background: #f7f7f7;
	color: #383749;
}

.contact-form input[type="password"]:focus {
	outline: none;
}

.contact-form input[type="password"]::placeholder {
	color: #c0c1cd;
}

.site-navigation ul li a {
	padding: 12px 30px;
}
</style>

</head>
<body class="courses-page">
	<div class="page-header">
		<header class="site-header">
			<div class="top-header-bar">
				<div class="container-fluid"></div>
				<!-- .container-fluid -->
			</div>
			<!-- .top-header-bar -->

			<div class="nav-bar">
				<div class="container">
					<div class="row">
						<div class="col-9 col-lg-3">
							<div class="site-branding">
								<h1 class="site-title">
									<a href="index.html" rel="home">Emp<span>Training</span></a>
								</h1>
							</div>
							<!-- .site-branding -->
						</div>
						<!-- .col -->

						<div
							class="col-3 col-lg-9 flex justify-content-end align-content-center">
							<nav
								class="site-navigation flex justify-content-end align-items-center">
								<ul style="overflow: inherit;"
									class="flex flex-column flex-lg-row justify-content-lg-end align-content-center">
									<li><a href="DeptMain.jsp">我的主页</a></li>
									<li><a href="DeptCoursesShow.jsp">课程浏览</a></li>
									<li><a href="course-add.jsp">部门申请</a></li>
									<li><a href="emp-apl.jsp">员工申请</a></li>
									<li><a href="reftable.jsp">参培员工</a></li>
									<li><a href="DeptScore.jsp">员工成绩</a></li>

									<li>
										<div class="dropdown">
											<a href="DeptInfo.jsp" class="dropbtn">个人中心 <span
												id="down" class="fa fa-caret-down"
												style="margin-left: 10px; display: block;"></span> <span
												id="up" class="fa fa-caret-up"
												style="margin-left: 10px; display: none;"></span>
											</a>
											<div class="dropdown-content">
												<a href="DeptInfo.jsp">个人信息</a> <a href="#" id="Logout">退出登录</a>
											</div>
										</div>
									</li>

								</ul>
							</nav>
							<!-- .site-navigation -->
						</div>
						<!-- .col -->

					</div>
					<!-- .row -->
				</div>
				<!-- .container -->
			</div>
			<!-- .nav-bar -->
		</header>
		<!-- .site-header -->

		<div class="page-header-overlay">
			<div class="container">
				<div class="row">
					<div class="col-12">
						<header class="entry-header">
							<h1>个人中心</h1>
						</header>
						<!-- .entry-header -->
					</div>
					<!-- .col -->
				</div>
				<!-- .row -->
			</div>
			<!-- .container -->
		</div>
		<!-- .page-header-overlay -->
	</div>
	<!-- .page-header -->

	<div class="container">
		<!-- .col -->
		<c:if test="${emp==null}">
			<!-- c:redirect 跳转到 UserServlet -->
			<c:redirect
				url="EmpServlet?op=dept&username=${sessionScope.username}"></c:redirect>
		</c:if>


		<div class="col-12 col-md-6 col-lg-4" style="float: left;">
			<div class="team-member">
				<img src="${emp.empPic}" id="pimages" alt="我的头像"
					style="width: 180px; height: 180px">
				<div class="layui-input-inline">
					<div class="site-demo-upbar">
						<div class=" layui-upload-button" style="border: #FFFFFF;">

							<button type="button" class="layui-btn" id="test1"
								style="background: transparent; color: #33CC66; font-size: 17px; margin-top: 10px">
								<i class="fa fa-pencil"></i> 更换头像
							</button>
							<input class="layui-upload" type="file" accept="undefined"
								id="previewImg" name="images" onchange="upload()">

						</div>

					</div>
				</div>
				<br>
				<button type="button" class="layui-btn" id="updPwd"
					style="background: transparent; color: #33CC66; font-size: 17px; margin-top: 10px">
					<i class="fa fa-pencil"></i> 修改密码
				</button>

				<h3 style="text-align: left; margin-left: 90px">
					<i class="fa fa-smile-o" style="margin-right: 5px"></i>${emp.empName}</h3>
				<h3 style="text-align: left; margin-left: 90px">
					<i class="fa fa-user-circle-o" style="margin-right: 5px"></i>${emp.empSex}</h3>
				<h3 style="text-align: left; margin-left: 90px">
					<i class="fa fa-graduation-cap" style="margin-right: 5px"></i>${emp.empXl}</h3>
				<h3 style="text-align: left; margin-left: 90px">
					<i class="fa fa-black-tie" style="margin-right: 5px"></i>${emp.empJob}</h3>
			</div>
			<!-- .team-member -->
		</div>
		<!-- .col -->

		<div class="col-12 col-lg-6"
			style="float: right; margin-bottom: 100px">
			<div class="contact-form"
				style="margin-top: 80px; margin-left: -100px">
				<form>
					员工编号 <input type="text" style="width: 25%; margin-right: 20px"
						readonly="readonly" name="empNo" value="${emp.empNo}">
					部门编号 <input type="text" style="width: 25%;" placeholder="Subject"
						readonly="readonly" value="${emp.deptNo}" name="deptNo"> <br>身份证号
					<input type="text" readonly="readonly" placeholder="Subject"
						name="empID" value="${emp.empID}"> <br>入职时间 <input
						type="text" placeholder="Subject" readonly="readonly"
						value="${emp.empTime}"> <br>家庭住址 <input type="text"
						style="background-color: white;" placeholder="Subject"
						value="${emp.empAddress} " id="empAddress"> <br>联系电话
					<input type="text" readonly="readonly" placeholder="Subject"
						value="${emp.empTel}" name="empTel"> <br>电子邮箱 <input
						style="background-color: white;" type="text" placeholder="Subject"
						value="${emp.empEmail}" id="empEmail">

					<!-- 图片信息 -->
					<input name="empPic" id="empPic" type="hidden"
						value="${emp.empPic}"> <input name="empName" id="empName"
						type="hidden" value="${emp.empName}"> <br>
					<button class="layui-btn" type="button" id="submit" onclick=""
						style="background-color: #33CC66; margin-left: 200px; margin-top: 30px;">保存</button>
				</form>
			</div>
			<!-- .contact-form -->
		</div>
		<!-- .col -->
	</div>
	<!-- .container -->

	<!--4 - ootstrap.min.js -->
	<script src="dist/js/bootstrap.min.js"></script>
	<!-- 引入layui.js文件 -->
	<script src="layui/layui.js" charset="utf-8"></script>

	<script type='text/javascript' src='js/js/jquery.js'></script>
	<script type='text/javascript' src='js/js/swiper.min.js'></script>
	<script type='text/javascript' src='js/js/masonry.pkgd.min.js'></script>
	<script type='text/javascript' src='js/js/jquery.collapsible.min.js'></script>
	<script type='text/javascript' src='js/js/custom.js'></script>
	<script src="js/jquery-2.0.3.js"></script>

	<!--导航栏动态箭头-->
	<script>
		$(".dropdown").mouseover(function() {
			$("#down").css('display', 'none');
			$("#up").css('display', 'block');
		});
		$(".dropdown").mouseout(function() {
			$("#down").css('display', 'block');
			$("#up").css('display', 'none');
		});
	</script>

	<!--修改信息-->
	<script>
		layui.use('upload', function() {
			var $ = layui.jquery, upload = layui.upload;
			$("#submit").click(function() {
				var empName = document.getElementById("empName").value;
				var empAddress = document.getElementById("empAddress").value;
				var empEmail = document.getElementById("empEmail").value;
				var empPic = document.getElementById("empPic").value;
				layer.confirm('确认修改信息吗？', function(index) {
					ajaxupd(empName, empAddress, empEmail, empPic);
					return false;
				});
			});
		});
		function ajaxupd(empName, empAddress, empEmail, empPic) {
			$.ajax({
				url : "EmpServlet?op=upd1",
				type : "get",
				data : {
					empName : empName,
					empAddress : empAddress,
					empEmail : empEmail,
					empPic : empPic
				},
				success : function(data) {
					if (data == "修改成功") {
						layer.msg(data, {
							icon : 1,
							time : 1000
						});
						return false;
					} else {
						layer.msg(data, {
							icon : 2,
							time : 1000
						});
						return false;
					}
				},
				dataType : "json"
			});
		}
	</script>

	<!--修改密码-->
	<script>
		$("#updPwd").click(function() {
			layer.open({
				type : 1,
				area : [ '500px', '450px' ],
				title : '修改密码',
				content : $('#pwdDemo')
			});

		});
	</script>

	<!--缩略图上传-->
	<script>
		function upload() {
			var formData = new FormData();
			formData.append('images', $('#previewImg')[0].files[0]);
			layer.msg('图片修改中', {
				icon : 16
			});
			$.ajax({
				type : "post",
				processData : false,
				contentType : false,
				url : "FileUploadServlet",
				data : formData,
				dataType : "json",//预期返回的数据类型
				success : function(data) {
					if (data.code == 1) {
						//关闭提示信息
						layer.closeAll('loading');
						//data.msg 图片路径
						$("#pimages").attr('src', data.msg);
						$("#empPic").val(data.msg);
						return false;
					} else {
						layer.msg(data.msg, {
							icon : 2,
							time : 3000
						});
					}
				}
			});
		}
	</script>

	<!--退出登录-->
	<script>
		layui
				.use(
						[ 'layer' ],
						function() {
							$ = layui.jquery;//jquery
							layer = layui.layer;//弹出层
							$("#Logout")
									.click(
											function() {
												layer
														.confirm(
																'确认要退出登录吗？',
																function(index) {
																	$
																			.ajax({
																				url : "LoginServlet",
																				type : "get",
																				data : {
																					op1 : "logout"
																				},
																				success : function(
																						data) {
																					if (data.code == 1) {
																						location.href = "http://localhost:8080/EmpTrainingTest/Login.jsp";
																						return false;
																					}
																				},
																				dataType : "json"
																			});
																});
											});
						});
	</script>


	<!--修改密码-->
	<script>
		layui.use('upload', function() {
			var $ = layui.jquery, upload = layui.upload;
			$("#userPwd")
					.blur(
							function() {
								if ($("#userPwd").val() != "") {
									var userPwd = document
											.getElementById("userPwd").value;
									var userName = $
									{
										sessionScope.username
									}
									;
									ajaxNewsName(userName, userPwd);
								}
								if ($("#userPwd").val() != ""
										&& $("#tishi1").html() != "密码正确！"
										&& $("#tishi1").html() != "密码错误！") {
									$("#tishi1").html("");
								}

							});
			//第一次为空 提示信息出现，填写了信息让为空的提示信息消失 
			$("#userPwds").blur(function() {
				if ($("#userPwd").val() != "") {
					$("#tishi2").html("");
				}

			});

			$("#userPwdss").blur(
					function() {
						if ($("#userPwdss").val() != ""
								&& $("#tishi").html() != "两次密码相同!"
								&& $("#tishi").html() != "两次密码不同!") {
							$("#tishi").html("");
						}

					});

			//查询密码输入是否正确
			function ajaxNewsName(userName, userPwd) {
				$.ajax({
					url : "UsersServlet?op=doSeekPwd",
					type : "get",
					data : {
						userName : userName,
						userPwd : userPwd
					},
					success : function(data) {
						if (data == "密码正确") {
							$("#tishi1").html("密码正确！");
							$("#tishi1").css("color", "green");
							return false;
						} else {
							$("#tishi1").html("密码错误！");
							$("#tishi1").css("color", "red");
							return false;
						}
					},
					dataType : "json"
				});
			}
			//检查两次密码是否相同
			$("#userPwdss").blur(function() {
				if ($("#userPwds").val() != "" && $("#userPwdss").val() != "") {
					var pwd = $("#userPwds").val();
					var pwd1 = $("#userPwdss").val();
					if (pwd == pwd1) {
						$("#tishi").html("两次密码相同!");
						$("#tishi").css("color", "green");
					} else {
						$("#tishi").html("两次密码不同!");
						$("#tishi").css("color", "red");
					}
				}

			});
			//("#username").blur 文本框失去焦点事件
			$("#userPwd").blur(function() {
				//读取用户名和密码的cookie信息
				var username = $.cookie('username');
				console.log(username);
				var userpwd = $.cookie('userpwd');
				console.log(userpwd);
				//如果用户输入的用户名 和 读取用户名一致
				if ($(this).val() == username) {
					//就将密码显示在密码框中
					$("#userpwd").val(userpwd);
				}
			});
			function check() {
				var userPwd = $("#userPwd").val();
				var userPwds = $("#userPwds").val();
				var userPwdss = $("#userPwdss").val();
				if (userPwd == "") {
					$("#tishi1").html("请输入旧密码！");
					$("#tishi1").css("color", "red");
					return false;
				} else if (userPwds == "") {
					$("#tishi2").html("请输入新密码！");
					$("#tishi2").css("color", "red");
					return false;
				} else if (userPwdss == "") {
					$("#tishi").html("请确认新密码！");
					$("#tishi").css("color", "red");
					return false;
				} else if ($("#tishi1").html() == "密码错误！") {
					return false;
				} else if ($("#tishi").html() == "两次密码不同!") {
					return false;
				}
				return true;
			}
			//修改密码
			layui.use('layer', function() {
				var layer = layui.layer;
				$("#submitt").click(
						function() {
							if (check()) {
								var userPwds = document
										.getElementById("userPwds").value;
								var userName = $
								{
									sessionScope.username
								}
								;
								layer.confirm('确认修改密码？', function(index) {
									ajaxupd(userName, userPwds);
								});
							}
						});
				function ajaxupd(userName, userPwds) {
					$.ajax({
						url : "UsersServlet?op=upd1",
						type : "get",
						data : {
							userPwds : userPwds,
							userName : userName
						},
						success : function(data) {
							if (data == "修改成功") {
								layer.msg(data, {
									icon : 1,
									time : 1000
								}, function() {
									window.location.reload();
								});
								return false;
							} else {
								layer.msg(data, {
									icon : 2,
									time : 1000
								});
								return false;
							}
						},
						dataType : "json"
					});
				}

			});

		});
	</script>
</body>
<!-- 修改密码弹出层 -->
<div class="container" style="display: none;" id="pwdDemo">
	<div class="col-12 col-lg-12">
		<div class="contact-form" style="margin-top: 10px; margin-left: 60px;">
			<form>
				<input style="width: 100%; margin-left: 0;" type="password"
					placeholder="请输入原密码" id="userPwd" name="userPwd"> <span
					id="tishi1"></span> <input style="width: 100%; margin-left: 0;"
					type="password" placeholder="请输入新密码" id="userPwds"> <span
					id="tishi2"></span><br> <input
					style="width: 100%; margin-left: 0;" type="password"
					placeholder="请确认新密码" id="userPwdss"> <span id="tishi"></span><br>
				<button class="layui-btn" type="button" id="submitt" onclick=""
					style="background-color: #33CC66; margin-left: 80px; margin-top: 30px;">保存</button>

			</form>
		</div>
		<!-- .contact-form -->
	</div>
	<!-- .col -->
</div>
</html>
